<template>
    <div class="nav-wrapper flex justify-between align-center">
        <!-- <a-icon
            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
            class="nav-fold boxHover"
            @click="toggleOpen"
            v-show="!horizontal"
        /> -->

        <bread-crumb v-show="!horizontal" />

        <div class="right-menu flex">
            <div class="audio_box">
                <span class="label">报警音效</span>
                <a-switch v-model="isAudio" @change="changeAudio" />
            </div>
            <div class="tenant" v-if="accountInfo.userType=='super_admin'">
                <a-select
                    style="width: 160px"
                    v-model="tenantCode"
                    showSearch
                    optionFilterProp="name"
                    placeholder="请选择租户"
                >
                    <a-select-option
                        :value="item.companyCode"
                        :name="item.companyName + item.companyCode"
                        v-for="item in tenantList"
                        :key="item.companyCode"
                        >{{ item.companyName }}</a-select-option
                    >
                </a-select>
            </div>
            <!-- <div class="right-menu-item pointer boxHover" @click.stop="screenFull">
                <svg-icon :icon="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" :size="18" />
            </div> -->

            <!-- <div class="right-menu-item pointer boxHover" style="margin-right:15px" @click="toNotice">
                <a-badge :count="count" :overflow-count="99" :offset="[3, -4]">
                    <svg-icon icon="bell" :size="18" />
                </a-badge>
            </div> -->
            <nav-user class="right-menu-item pointer boxHover flex-sub" />
        </div>
    </div>
</template>

<script>
import navUser from './navUser';
import screenfull from 'screenfull';
import breadCrumb from './breadCrumb';
import { mapState } from 'vuex';

export default {
    name: 'navBar',
    inject: ['playAudio','closeAudio'],
    props: {
        collapsed: {
            type: Boolean,
            default: true
        },
        horizontal: {
            type: Boolean,
            default: false
        }
    },
    components: { navUser, breadCrumb },
    watch:{
        tenantCode:function(e){
            this.$store.commit('user/SET_TENANT',e)
        }
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo,
            tenantInfo: state => state.user.tenantInfo,
            tenantList:state=>state.user.tenantList,
            tenant:state=>state.user.tenant,
        }),
        isAudio: {
            get(){
                return this.$store.state.setting.isAudio
            },
            set(e){
                this.$store.dispatch('setting/changeOpenAudio', e);
            }
        }
    },
    data() {
        return {
            breadList: [
                {
                    path: '/dashboard',
                    meta: { title: '首页', icon: 'dashboard' }
                }
            ],
            count: 6,
            isFullscreen: false,
            tenantCode:''
        };
    },
    created(){
        this.tenantCode = this.tenant;
    },
    methods: {
        toggleOpen() {
            this.$store.commit('setting/TOGGLE_OPEN');
        },
        screenFull() {
            if (!screenfull.isEnabled) {
                this.$message.warning('不好意思，你的电脑不支持全屏，赶紧换个电脑吧，谢谢~');
                return false;
            }
            screenfull.toggle();
            this.isFullscreen = !this.isFullscreen;
        },
        changeVisible() {
            this.$store.dispatch('setting/changeVisible', true);
        },
        toNotice() {
            this.count = 0;
            // this.$router.push({
            //     name: 'userInfo',
            //     params: {
            //         key: 'noticePage'
            //     }
            // });
        },
        changeAudio(e) {
            this.$store.dispatch('setting/changeOpenAudio', e);
            this.playAudio('', 'realtime', false);
            if(!e){
                this.closeAudio();
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.audio_box {
    margin-right: 5px;
    display: flex;
    align-items: center;
    .label {
        margin-right: 5px;
    }
}
.nav-wrapper {
    height: 54px;
    overflow: hidden;
    position: relative;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    .boxHover {
        &:hover {
            background: rgba(0, 0, 0, 0.025);
        }
    }
    .nav-fold {
        padding: 0 18px;
        height: 100%;
        cursor: pointer;
        font-size: 20px;
        line-height: 58px;
        transition: all 0.3s, padding 0s;
    }

    .right-menu {
        height: 100%;
        margin-right: 20px;
        align-items: center;
        // width: 280px;
        .tenant{
            margin-left: 10px;
        }
        .right-menu-item {
            height: 100%;
            padding: 0 8px;
            line-height: 54px;
        }
    }
}
</style>
